"use client"
import VideoSection from "@/components/VideoSection";
import SightsSection from "@/components/SightsSection";
import FloatMenu from "@/components/FloatMenu";
import NewsSection from "@/components/NewsSection";
import SectionHeader from "@/components/SectionHeader";
import EmptyLine from "@/components/EmptyLine";
import {AiOutlineArrowRight} from "react-icons/ai";
import MoreLink from "@/components/MoreLink";
import BottomLinkSection from "@/components/BottomLinkSection";
import {Swiper} from "swiper/react";
import {SwiperSlide} from "swiper/react";
import Image from "next/image";
import 'swiper/css';
import {Pagination} from "swiper/modules";
export default function Home() {
    return (
        <div>
            <div className={"mt-[-64px]"}>
                <VideoSection/>
            </div>
            <EmptyLine height={50} color={'white'} />
            <div className={"mx-auto max-w-7xl"}>
                <SectionHeader title={"民生动态"}/>
                <NewsSection/>
                <MoreLink href={'/news'} />
            </div>
            <EmptyLine height={100} color={'white'} />
            <div className={"mx-auto max-w-7xl"}>
                <SectionHeader title={"自然风光"}/>
                <SightsSection/>
            </div>
            <div className={"mx-auto max-w-7xl mt-10"}>
                <SectionHeader title={"特色产业"}/>
                <div className={"pb-20 pt-10"}>
                    <Swiper
                        slidesPerView={3}
                        spaceBetween={30}
                        pagination={{
                            clickable: true,
                        }}
                        modules={[Pagination]}
                        className="mySwiper"
                    >
                        <SwiperSlide>
                            <Image src={'/images/foods/hg1.jpeg'} alt={'leemon'} width={400} height={200} className={"aspect-[3/2] object-cover w-full rounded-md"}/>
                        </SwiperSlide>
                        <SwiperSlide>
                            <Image src={'/images/foods/gz2.jpeg'} alt={'leemon'} width={400} height={200} className={"aspect-[3/2] object-cover  w-full rounded-md"}/>
                        </SwiperSlide>
                        <SwiperSlide>
                            <Image src={'/images/production/ningmeng.jpg'} alt={'leemon'} width={400} height={200} className={"aspect-[3/2] object-cover  w-full rounded-md"}/>
                        </SwiperSlide>
                        <SwiperSlide>
                            <Image src={'/images/production/ningmeng.jpg'} alt={'leemon'} width={400} height={200} className={"aspect-[3/2] object-cover  w-full rounded-md"}/>
                        </SwiperSlide>
                        <SwiperSlide>
                            <Image src={'/images/production/ningmeng.jpg'} alt={'leemon'} width={400} height={200} className={"aspect-[3/2] object-cover  w-full rounded-md"}/>
                        </SwiperSlide>
                    </Swiper>

                </div>
            </div>
            <EmptyLine height={100}/>
            <EmptyLine height={1} className={"my-2 bg-gray-300"}/>
            <BottomLinkSection />
        </div>
    )
}
